<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>下载中心</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${ctxPath}/static/manage/css/x-admin.css" media="all">
    <link rel="stylesheet" href="${ctxPath}/static/manage/layui/css/layui.css" media="all">
    <script src="${ctxPath}/static/manage/layui/layui.js"></script>
    <script src="${ctxPath}/static/manage/js/jquery.js"></script>
</head>
<body>
    <div class="x-nav">
        <span class="nav-breadcrumb">
            <a><cite>后台管理></cite></a>
            <a><cite>下载中心></cite></a>
            <a><cite>文件列表</cite></a>
        </span>
    </div>
    <div class="x-body">
        <blockquote class="layui-elem-quote quoteBox">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input searchContent" placeholder="请输入文件名关键字" />
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>
            <div class="layui-btn" id="uploadFile">
                <i class="layui-icon">&#xe67c;</i>添加文件
            </div>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
        </blockquote>



        <table class="layui-hide" id="test"></table>

        <!-- 这里的 checked 的状态只是演示 -->
        <script type="text/html" id="switchTpl">
            <input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>
        </script>

        <script>
            layui.use('table', function(){
                var table = layui.table
                    ,form = layui.form;

                table.render({
                    elem: '#test'
                    ,id: 'search_table_id'
                    ,cellMinWidth: 80
                    ,height: 500
                    ,url: 'download/downloadTable'
                    ,page: true
                    ,limit: 10
                    ,limits : [10]
                    ,cols: [[
                        { checkbox: true, fixed: true },
                        { field: 'id', title: '序号', width:'6%', sort: true, fixed: true },
                        { field: 'fileName', title: '文件名称', width:'16%', sort: true },
                        { field: 'articleTitle', title: '对应文章', width:'14%' },
                        { field: 'uploadTime', title: '上传时间',width:'10%', sort: true},
                        { field: 'uploadUser', title: '上传人',width:'10%' },
                        {field:'sex', title:'性别', width:85, templet: '#switchTpl', unresize: true},
                        { field: 'tempId', title: '操作', width:'15%', templet: function(d){
                                return '<a class="layui-btn layui-btn-xs" lay-event="edit" lay-id="'+ d.tempId +'"><i class="layui-icon layui-icon-edit"></i>排序</a>' +
                                    '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" lay-id="'+ d.tempId +'"><i class="layui-icon layui-icon-delete"></i>移除</a>';
                            }
                        }
                    ]]
                });

                //监听性别操作
                form.on('switch(sexDemo)', function(obj){
                    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
                });

                //监听锁定操作
                form.on('checkbox(lockDemo)', function(obj){
                    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
                });
            });
        </script>

    </div>
</body>
</html>

